<template>
  <div class="Index">
    <!-- 按钮组 -->
    <comMb8Button
      :config="comMb8ButtonConfig"
      @handle="clickBtnGroup"
    ></comMb8Button>
    <!-- 加载中 or 空列表 -->
    <el-empty :description="emptyDescription" v-show="isShowEmpty"></el-empty>
    <!-- 文件夹列表 -->
    <div class="folder-list" v-show="!isShowEmpty">
      <div
        :class="[folderId == item.idStr ? 'folder-selected' : 'folder']"
        v-for="(item, index) in folderList"
        :key="item.id"
        @dblclick="dblClickFolderItem(index, item.idStr)"
        @click="clickFolderItem(index, item.idStr)"
      >
        <comImgStack :img="item.url" width="100" :fit="'contain'"></comImgStack>
        <p class="f-title">
          {{ item.name != "" ? item.name : "未命名文件夹" }}
        </p>
        <p class="f-num">{{ item.photoNum }}个图片</p>
      </div>
    </div>

    <!-- 新增文件夹对话框 -->
    <comDialog
      :title="comDialogConfig_AddFolder.title"
      :dialogVisible="comDialogConfig_AddFolder.dialogVisible"
      :width="comDialogConfig_AddFolder.width"
      @EventClose="comDialogConfig_AddFolder.dialogVisible = false"
    >
      <el-form
        :model="form_AddFolder"
        label-width="100px"
        label-position="left"
        :rules="form_AddFolderRules"
        ref="form_AddFolder"
        onsubmit="return false"
      >
        <el-form-item label="文件夹名称" prop="name">
          <el-input
            v-model="form_AddFolder.name"
            placeholder="请输入文件夹名称"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="comDialogConfig_AddFolder.dialogVisible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submitForm_AddFolder()"
          >提交</el-button
        >
      </template>
    </comDialog>

    <!-- 上传对话框 -->
    <comDialog
      :title="comDialogConfig_UploadImg.title"
      :dialogVisible="comDialogConfig_UploadImg.dialogVisible"
      :width="comDialogConfig_UploadImg.width"
      @EventClose="eventClose_UpLoad"
    >
      <div style="margin-bottom: 20px">
        <comSelect
          :options="comSelectOptions_UpLoad"
          @EventChange="comSelectOptions_UpLoad_EventChange()"
        ></comSelect>
      </div>
      <!-- 按钮 -->
      <el-button size="small" @click="selectFile">选择本地图片</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="primary"
        @click="uploadListSubmit()"
        :disabled="upDisabled"
        >上传到服务器</el-button
      >
      <el-upload
        :action="el_uploadConfig.action"
        :list-type="el_uploadConfig.listType"
        :auto-upload="el_uploadConfig.autoUpload"
        :accept="el_uploadConfig.accept"
        :multiple="true"
        :on-change="handleUploadChange"
        ref="elUpload"
      >
        <!-- tip -->
        <div
          style="
            margin-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #cccccc;
          "
          slot="tip"
        >
          <span style="font-size: 15px; font-weight: bold">上传队列</span>
          <br />
          <span style="font-size: 12px"
            >tip：支持上传
            <span
              v-for="(item, index) in setting.picFormat"
              :key="index"
              style="font-weight: bold"
            >
              <span v-if="index != 0">,</span>
              {{ item }}
            </span>
            格式的图片，单个文件大小最大支持
            <span style="font-weight: bold"
              >{{ setting.picStoreSize }} {{ setting.picStoreUnit }}</span
            >
            ，尺寸不超过
            <span style="font-weight: bold">{{
              setting.picSize_W + " × " + setting.picSize_H
            }}</span>
            ，文件名不超过
            <span style="font-weight: bold">30字符</span>
          </span>
        </div>
        <!-- 上传队列 -->
        <div
          :class="
            chkLongFileName(file) ||
            chkOverSizeFile(file) ||
            chkOverStoreFile(file) ||
            chkNameCollisionFileUid(file)
              ? 'file-list-mark'
              : 'file-list'
          "
          slot="file"
          slot-scope="{ file }"
        >
          <i class="el-icon-close" @click="RemoveUploadFile(file)"></i>
          <el-tooltip
            placement="top"
            :disabled="
              chkLongFileName(file) ||
              chkOverSizeFile(file) ||
              chkOverStoreFile(file) ||
              chkNameCollisionFileUid(file)
                ? false
                : true
            "
          >
            <div slot="content">
              <span>问题：<br /></span>
              <span v-show="chkLongFileName(file)">文件名超过30字符<br /></span>
              <span v-show="chkOverSizeFile(file)">图片尺寸超出限制<br /></span>
              <span v-show="chkOverStoreFile(file)"
                >文件大小超出限制<br
              /></span>
              <span v-show="chkNameCollisionFileUid(file)"
                >存在同名图片文件<br
              /></span>
            </div>
            <el-image
              :src="file.url"
              :fit="'contain'"
              class="file-list-img"
            ></el-image>
          </el-tooltip>
          <div
            style="
              height: 30px;
              padding: 0 5px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            "
          >
            {{ file.name }}
          </div>
        </div>
      </el-upload>
    </comDialog>

    <!-- 侧栏 -->
    <el-drawer
      title="文件夹信息详情"
      :visible.sync="isShowDrawer"
      :direction="'rtl'"
      :size="'35%'"
      v-if="folderList[folderIndex]"
    >
      <el-descriptions :column="1" :border="true">
        <el-descriptions-item label="名称">
          <el-input
            placeholder="请输入内容"
            v-model="updateNameInput"
            maxlength="30"
            show-word-limit
          >
            <el-button slot="append" @click="updateFolderName()"
              >保存</el-button
            >
          </el-input>
        </el-descriptions-item>
        <el-descriptions-item label="文件数">{{
          folderList[folderIndex].photoNum
        }}</el-descriptions-item>
        <el-descriptions-item label="文件大小">
          {{ this.folderSize(folderList[folderIndex].photoSize) }}
        </el-descriptions-item>
        <el-descriptions-item label="创建日期">{{
          folderList[folderIndex].createdTime
        }}</el-descriptions-item>
        <el-descriptions-item label="修改日期">{{
          folderList[folderIndex].updatedTime
        }}</el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script>
import comMb8Button from "@/wss/components/comMb8Button.vue";
import comImgStack from "@/wss/components/comImgStack.vue";
import comDialog from "@/wss/components/comDialog.vue";
import comSelect from "@/wss/components/comSelect.vue";

import {
  getFolderWithImgList_ByType,
  addFolder,
  deleteFolder_ById,
  updateFolderName_ById,
} from "@/wss/api/work/folder";
import { getPhotoList_ByFolderId, addPhoto } from "@/wss/api/work/photo";
import { getConfigListPhotoApi } from "@/wss/api/base/config";
export default {
  name: "Index",

  components: { comMb8Button, comImgStack, comDialog, comSelect },

  data() {
    return {
      //------- 查询配置 -------//
      queryData: {
        type: 1,
      },
      //------- 按钮配置 -------//
      comMb8ButtonConfig: [
        {
          label: "新增文件夹",
          type: "primary",
          icon: "el-icon-folder-opened",
          vHasPermi: "work:folder:add",
          btnId: "addNewFolder",
        },
        {
          label: "上传图片",
          type: "",
          icon: "el-icon-picture-outline",
          disabled: true,
          vHasPermi: "",
          btnId: "uploadImg",
        },
        {
          label: "删除文件夹",
          type: "",
          icon: "el-icon-delete",
          disabled: true,
          vHasPermi: "work:folder:remove",
          btnId: "deleteFolder",
        },
        {
          label: "文件夹信息",
          type: "",
          icon: "el-icon-more",
          disabled: true,
          vHasPermi: "work:photo:getInfoFolder",
          btnId: "folderInfo",
        },
      ],
      //------- 空状态 or 加载中 -------//
      emptyDescription: "加载中...",
      isShowEmpty: true,
      //------- 文件夹 -------//
      folderIndex: 0, //选中的文件夹index
      folderId: "", //选中的文件夹id
      folderList: [],
      //------- 侧栏 -------//
      isShowDrawer: false,
      updateNameInput: "",
      folderInfo: {
        id: "",
        folderName: "",
        //imgList: [],
      },

      //------- 对话框 -------//
      comDialogConfig_AddFolder: {
        dialogVisible: false,
        title: "新增文件夹",
        width: "40%",
      },
      form_AddFolder: {
        name: "",
      },
      form_AddFolderRules: {
        name: [
          { required: true, message: "请输入文件夹名称", trigger: "blur" },
        ],
      },

      //上传对话框
      comDialogConfig_UploadImg: {
        dialogVisible: false,
        title: "上传图片",
        width: "760px",
      },
      //上传插件
      el_uploadConfig: {
        action: "#",
        listType: "picture",
        autoUpload: false,
        accept: "image/*",
      },
      //上传按钮禁用标识
      upDisabled: true,
      //上传格式类型与分辨率
      setting: {
        picStoreSize: "", //大小
        picStoreUnit: "",
        picSize_W: "", //宽度
        picSize_H: "", //高度
        picFormat: [], //格式数组
      },
      //文件名过长的文件uid
      longFileUid: [],
      //尺寸过大的文件uid
      overSizeFileUid: [],
      //文件大小过大的uid
      overStoreFileUid: [],
      //文件名冲突的uid
      nameCollisionFileUid: [],
      //用于检验重复对应文件夹的图片列表
      imgList: [],

      //------快速筛选------//
      comSelectOptions_UpLoad: {
        value: "",
        title: "选择文件夹",
        list: [],
        selectFolderIndex: "",
      },
    };
  },
  computed: {
    folderSize() {
      return function (size) {
        if (size != null && size < 1024) {
          size = size.toFixed(2) + " B";
          return size;
        } else if (size != null && size < 1024 * 1024) {
          size = size / 1024;
          size = size.toFixed(2) + " KB";
          return size;
        } else if (size != null && size < 1024 * 1024 * 1024) {
          size = size / (1024 * 1024);
          size = size.toFixed(2) + " MB";
          return size;
        } else if (size != null && size >= 1024 * 1024 * 1024) {
          size = size / (1024 * 1024 * 1024);
          size = size.toFixed(2) + " GB";
          return size;
        } else if (size == null) {
          return "0";
        }
      };
    },

    chkUploadFilesList() {
      if (this.$refs.elUpload.uploadFiles.length == 0) {
        return true;
      } else if (this.$refs.elUpload.uploadFiles.length != 0) {
        return false;
      }
    },
    chkLongFileName() {
      return function (file) {
        let index_longFileUid = this.longFileUid.findIndex((item) => {
          return item == file.uid;
        });
        if (index_longFileUid == -1) {
          return false;
        } else {
          return true;
        }
      };
    },
    chkOverSizeFile() {
      return function (file) {
        let index_overSizeFileUid = this.overSizeFileUid.findIndex((item) => {
          return item == file.uid;
        });
        if (index_overSizeFileUid == -1) {
          return false;
        } else {
          return true;
        }
      };
    },
    chkOverStoreFile() {
      return function (file) {
        let index_overStoreFileUid = this.overStoreFileUid.findIndex((item) => {
          return item == file.uid;
        });
        if (index_overStoreFileUid == -1) {
          return false;
        } else {
          return true;
        }
      };
    },
    chkNameCollisionFileUid() {
      return function (file) {
        let index_nameCollisionFileUid = this.nameCollisionFileUid.findIndex(
          (item) => {
            return item == file.uid;
          }
        );
        if (index_nameCollisionFileUid == -1) {
          return false;
        } else {
          return true;
        }
      };
    },
  },
  watch: {
    folderId: function () {
      if (this.folderId == "") {
        this.comMb8ButtonConfig[2].disabled = true;
        this.comMb8ButtonConfig[2].type = "";

        this.comMb8ButtonConfig[3].disabled = true;
        this.comMb8ButtonConfig[3].type = "";
      } else {
        this.comMb8ButtonConfig[2].disabled = false;
        this.comMb8ButtonConfig[2].type = "danger";

        this.comMb8ButtonConfig[3].disabled = false;
        this.comMb8ButtonConfig[3].type = "success";
      }
    },
  },

  mounted() {
    this.getFolderWithImgList_ByType(this.queryData);
    this.getConfigListPhotoApi();
  },

  methods: {
    //------- 文件夹 -------//
    clickFolderItem(i, id) {
      this.folderIndex = i;
      this.folderId = id;
      this.updateNameInput = this.folderList[i].name;
      //this.folderInfo = this.folderList[i];
    },
    dblClickFolderItem(i) {
      this.$router.push({
        path: "/contentSupervision/pictureManagement/pictureManagement-classificationManagement",
        query: { folder: JSON.stringify(this.folderList[i]) },
      });
    },
    //------- 按钮组 -------//
    clickBtnGroup(btnType, btnId) {
      if (btnId == "addNewFolder") {
        //新增文件夹
        this.resetForm("form_AddFolder");
        this.comDialogConfig_AddFolder.dialogVisible = true;
      } else if (btnId == "uploadImg") {
        //上传图片
        this.comDialogConfig_UploadImg.dialogVisible = true;
      } else if (btnId == "deleteFolder") {
        //删除文件夹
        this.$confirm(
          "此操作将删除该文件夹以及其中的图片文件, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.deleteFolder_ById({ type: "1", id: this.folderId });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if (btnId == "folderInfo") {
        //文件夹信息
        if (this.folderId != "") {
          this.updateNameInput = this.folderList[this.folderIndex].name;
          this.isShowDrawer = !this.isShowDrawer;
        }
      }
    },
    //------- 对话框 表单验证 -------//
    submitForm_AddFolder() {
      let index = this.folderList.findIndex((item) => {
        return item.name == this.form_AddFolder.name;
      });
      this.$refs["form_AddFolder"].validate((valid) => {
        if (valid && index == -1) {
          let data = {
            type: 1,
            name: this.form_AddFolder.name,
            path: this.form_AddFolder.name,
          };
          this.addFolder(data);
        } else if (index != -1) {
          this.$modal.msgError("存在相同的文件夹名");
          return false;
        } else {
          return false;
        }
      });
    },
    //重置有表单验证的表单项
    resetForm(formName) {
      console.log("fromName", formName);
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },

    //------- 上传图片 -------//
    //手动实现选择文件
    selectFile() {
      if (this.comSelectOptions_UpLoad.value == "") {
        this.$modal.msgWarning("请选择文件夹");
      } else {
        this.$refs["elUpload"].$refs["upload-inner"].handleClick();
      }
    },
    //检测上传列表 判断是否禁用上传按钮
    handleUploadChange(file, fileList) {
      fileList.length > 0
        ? (this.upDisabled = false)
        : (this.upDisabled = true);
    },
    //上传对话框关闭钩子
    eventClose_UpLoad() {
      this.comDialogConfig_UploadImg.dialogVisible = false;
      this.$refs.elUpload.uploadFiles = [];
      this.comSelectOptions_UpLoad.value = "";
      this.longFileUid = [];
      this.overSizeFileUid = [];
      this.overStoreFileUid = [];
      this.nameCollisionFileUid = [];
      this.upDisabled = true;
    },
    //加载文件夹下拉框数据
    getComSelectOptions_UpLoad_List() {
      this.comSelectOptions_UpLoad.list = []; //重置列表后在加入新的对象值
      for (let i = 0; i < this.folderList.length; i++) {
        let option = {
          label: "",
          value: "",
        };
        option.label = this.folderList[i].name;
        option.value = this.folderList[i].idStr;
        this.comSelectOptions_UpLoad.list.push(option);
      }
    },
    //删除一个列表中的文件
    RemoveUploadFile(file) {
      console.log(file, this.$refs.elUpload.uploadFiles);
      let index = this.$refs.elUpload.uploadFiles.findIndex((item) => {
        return item.uid == file.uid;
      });
      let index_longFileUid = this.longFileUid.findIndex((item) => {
        return item == file.uid;
      });
      let index_overSizeFileUid = this.overSizeFileUid.findIndex((item) => {
        return item == file.uid;
      });
      let index_overStoreFileUid = this.overStoreFileUid.findIndex((item) => {
        return item == file.uid;
      });
      let index_nameCollisionFileUid = this.nameCollisionFileUid.findIndex(
        (item) => {
          return item == file.uid;
        }
      );

      this.$refs.elUpload.uploadFiles.splice(index, 1);
      if (index_longFileUid != -1) {
        this.longFileUid.splice(index_longFileUid, 1);
      }
      if (index_overSizeFileUid != -1) {
        this.overSizeFileUid.splice(index_overSizeFileUid, 1);
      }
      if (index_overStoreFileUid != -1) {
        this.overStoreFileUid.splice(index_overStoreFileUid, 1);
      }
      if (index_nameCollisionFileUid != -1) {
        this.nameCollisionFileUid.splice(index_nameCollisionFileUid, 1);
      }
      //检测上传列表 判断是否禁用上传按钮
      this.$refs.elUpload.uploadFiles.length > 0
        ? (this.upDisabled = false)
        : (this.upDisabled = true);
    },
    //提交列表
    uploadListSubmit() {
      console.log(this.$refs.elUpload);
      var UploadList = [];
      if (this.comSelectOptions_UpLoad.value == "") {
        this.$modal.msgWarning("请选择文件夹");
      } else if (this.$refs.elUpload.uploadFiles.length == 0) {
        this.$modal.msgWarning("请选择需要上传的本地图片");
      } else {
        for (let i = 0; i < this.$refs.elUpload.uploadFiles.length; i++) {
          let file = this.$refs.elUpload.uploadFiles[i].raw;
          let index = this.comSelectOptions_UpLoad.selectFolderIndex;

          const reader = new FileReader();
          reader.readAsDataURL(this.$refs.elUpload.uploadFiles[i].raw);
          reader.onload = (e) => {
            // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
            var data = {
              type: this.folderList[index].name,
              folderId: this.folderList[index].idStr,
              base64: e.target.result.split(",")[1],
              path: this.folderList[index].path,
              name: this.$refs.elUpload.uploadFiles[i].name.split(".")[0],
              size: this.$refs.elUpload.uploadFiles[i].size,
              format: this.$refs.elUpload.uploadFiles[i].name.split(".")[1],
            };

            let index_longFileUid = this.longFileUid.findIndex((item) => {
              return item == this.$refs.elUpload.uploadFiles[i].uid;
            });
            if (
              this.$refs.elUpload.uploadFiles[i].name.length > 30 &&
              index_longFileUid == -1
            ) {
              //将名字过长的文件id加入数组
              console.log(
                "long:",
                this.$refs.elUpload.uploadFiles[i].name,
                this.$refs.elUpload.uploadFiles[i].uid
              );
              this.longFileUid.push(this.$refs.elUpload.uploadFiles[i].uid);
            }
            UploadList.push(data);

            //------- 搜集尺寸过大的uid -------//
            var img = new Image();
            img.onload = () => {
              let index_overSizeFileUid = this.overSizeFileUid.findIndex(
                (item) => {
                  return item == this.$refs.elUpload.uploadFiles[i].uid;
                }
              );
              if (
                img.width > this.setting.picSize_W ||
                img.height > this.setting.picSize_H
              ) {
                if (index_overSizeFileUid == -1) {
                  //将尺寸过大的文件ID加入数组
                  console.log(
                    "picSize:",
                    this.$refs.elUpload.uploadFiles[i].name,
                    this.$refs.elUpload.uploadFiles[i].uid
                  );
                  this.overSizeFileUid.push(
                    this.$refs.elUpload.uploadFiles[i].uid
                  );
                }
              }
            };
            img.src = this.$refs.elUpload.uploadFiles[i].url;

            //------- 搜集文件大小过大的uid -------//
            let size = this.setting.picStoreSize;
            if (this.setting.picStoreUnit == "KB") {
              size = size * 1024;
            } else if (this.setting.picStoreUnit == "MB") {
              size = size * 1024 * 1024;
            }
            let index_overStoreFileUid = this.overStoreFileUid.findIndex(
              (item) => {
                return item == this.$refs.elUpload.uploadFiles[i].uid;
              }
            );
            if (
              this.$refs.elUpload.uploadFiles[i].raw.size > size &&
              index_overStoreFileUid == -1
            ) {
              console.log("picStoreSize:", size, this.setting.picStoreSize);
              this.overStoreFileUid.push(
                this.$refs.elUpload.uploadFiles[i].uid
              );
            }

            //------- 搜集文件名与服务器文件冲突的uid -------//
            this.getPhotoList_ByFolderId({
              id: this.comSelectOptions_UpLoad.value,
            }); //获取最新的文件列表
            var index_nameCollisionFileUid =
              this.nameCollisionFileUid.findIndex((item) => {
                return item == this.$refs.elUpload.uploadFiles[i].uid;
              });

            this.imgList.forEach((item) => {
              //将与图片列表文件重名的uid
              if (
                item.filename == this.$refs.elUpload.uploadFiles[i].name &&
                index_nameCollisionFileUid == -1
              ) {
                //console.log(this.$refs.elUpload.uploadFiles[i].uid);
                this.nameCollisionFileUid.push(
                  this.$refs.elUpload.uploadFiles[i].uid
                );
              }
            });

            //------- 搜集待上传文件冲突的uid -------//
            this.$refs.elUpload.uploadFiles.forEach((item) => {
              var index = this.nameCollisionFileUid.findIndex((item_) => {
                return item_ == item.uid;
              });

              if (
                this.$refs.elUpload.uploadFiles[i].name == item.name &&
                this.$refs.elUpload.uploadFiles[i].uid != item.uid &&
                index_nameCollisionFileUid == -1 &&
                index == -1
              ) {
                this.nameCollisionFileUid.push(item.uid);
              }
            });
          };
        }

        setTimeout(() => {
          if (
            this.longFileUid.length != 0 ||
            this.overSizeFileUid.length != 0 ||
            this.overStoreFileUid.length != 0 ||
            this.nameCollisionFileUid.length != 0
          ) {
            this.$modal.msgError(
              "添加失败：已标记对应文件，请根据提示排除异常文件后重新上传"
            );
          } else {
            setTimeout(() => {
              console.log(UploadList);
              this.addPhoto(UploadList);
            }, 15);
          }
        }, 10);
      }
    },

    //------- 处理 初始化 分配 图片设置 -------//
    assignSettingData(data) {
      data.forEach((item) => {
        if (item.type == "p_store_unit") {
          this.setting.picStoreUnit = item.value;
          this.picStoreUnit_Id = item.idStr;
        } else if (item.type == "p_store") {
          this.setting.picStoreSize = item.value;
          this.picStoreSize_Id = item.idStr;
        } else if (item.type == "p_size_w") {
          this.setting.picSize_W = item.value;
          this.picSize_W_Id = item.idStr;
        } else if (item.type == "p_size_h") {
          this.setting.picSize_H = item.value;
          this.picSize_H_Id = item.idStr;
        } else if (item.type == "p_format") {
          let arr = item.value.split(",");
          let arr_accept = "";
          this.setting.picFormat = [];
          arr.forEach((element) => {
            this.setting.picFormat.push(element);
          });
          arr.forEach((element, index) => {
            var str = ",";
            if (index == 0) {
              str = "";
            }
            arr_accept = arr_accept + str + "image/" + element;
          });
          this.el_uploadConfig.accept = arr_accept;
          this.picFormat_Id = item.idStr;
        }
      });
    },

    //------- 侧栏 修改文件夹名称 -------//
    updateFolderName() {
      let index = this.folderList.findIndex((item) => {
        return (
          item.name == this.updateNameInput &&
          item.idStr != this.folderList[this.folderIndex].idStr
        );
      });
      if (index == -1) {
        let data = {
          id: this.folderId,
          name: this.updateNameInput,
        };
        this.updateFolderName_ById(data);
      } else {
        this.$modal.msgError("存在相同的文件夹名");
      }
    },

    //------- 快速筛选 选择事件 -------//
    comSelectOptions_UpLoad_EventChange() {
      this.comSelectOptions_UpLoad.selectFolderIndex =
        this.folderList.findIndex((item) => {
          return item.idStr == this.comSelectOptions_UpLoad.value;
        });
      this.getPhotoList_ByFolderId({
        id: this.comSelectOptions_UpLoad.value,
      }); //获取最新的文件列表
    },

    /* 获取数据 */
    //------- 获取 全部图片 文件夹 -------//
    async getFolderWithImgList_ByType(data) {
      let result = await getFolderWithImgList_ByType(data).then((res) => res);
      console.log(result, "文件管理返回的数据");
      if (result.code == "200") {
        this.folderList = result.data;
        if (this.folderList.length != 0) {
          this.isShowEmpty = false;
          this.comMb8ButtonConfig[1].disabled = false;
          this.comMb8ButtonConfig[1].type = "primary";
          this.getComSelectOptions_UpLoad_List();
        } else {
          this.emptyDescription = "暂无数据";
        }
      }
    },
    //------- 添加 图片文件夹 -------//
    async addFolder(data) {
      let result = await addFolder(data).then((res) => res);
      if (result.code == "200") {
        this.$modal.msgSuccess(result.msg);
        this.getFolderWithImgList_ByType(this.queryData);
        this.comDialogConfig_AddFolder.dialogVisible = false;
        if (this.folderList.length != 0) {
          this.isShowEmpty = false;
        } else {
          this.emptyDescription = "暂无数据";
        }
      } else {
        this.$modal.msgError("添加失败：", result);
      }
    },
    //------- 上传图片 -------//
    async addPhoto(data) {
      let result = await addPhoto(data).then((res) => res);
      if (result.code == "200") {
        this.$modal.msgSuccess(result.msg);
        this.getFolderWithImgList_ByType(this.queryData);
        this.comDialogConfig_UploadImg.dialogVisible = false;
      } else {
        this.$modal.msgError("添加失败：", result);
      }
    },
    //------- 删除 图片文件夹 -------//
    async deleteFolder_ById(data) {
      let result = await deleteFolder_ById(data).then((res) => res);
      if (result.code == "200") {
        this.$modal.msgSuccess(result.msg);
        this.getFolderWithImgList_ByType(this.queryData);
        this.folderIndex = 0; //重置选中的文件夹index
        this.folderId = ""; //重置选中的文件夹id
        if (this.folderList.length != 0) {
          this.isShowEmpty = false;
        } else {
          this.emptyDescription = "暂无数据";
        }
      } else {
        this.$modal.msgError("添加失败：", result);
      }
    },
    //------- 侧栏 更新 文件夹名字 -------//
    async updateFolderName_ById(data) {
      let result = await updateFolderName_ById(data).then((res) => res);
      if (result.code == "200") {
        this.$modal.msgSuccess(result.msg);
        this.getFolderWithImgList_ByType(this.queryData);
        this.isShowDrawer = false;
        if (this.folderList.length != 0) {
          this.isShowEmpty = false;
        } else {
          this.emptyDescription = "暂无数据";
        }
      } else {
        this.$modal.msgError("失败：", result);
      }
    },

    //------- 上传 对应的文件夹 图片列表 -------//
    async getPhotoList_ByFolderId(data) {
      let result = await getPhotoList_ByFolderId(data).then((res) => res);
      if (result.code == "200") {
        this.imgList = result.data;
        //console.log(this.imgList);
      } else {
        this.$modal.msgError("获取信息失败：", result);
      }
    },

    //------- 获取 配置 图片设置 -------//
    async getConfigListPhotoApi(data) {
      let result = await getConfigListPhotoApi(data).then((res) => res);
      if (result.code == "200") {
        this.assignSettingData(result.rows);
        this.el_uploadConfig;
      } else {
        this.$modal.msgError("获取配置失败：", result);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Index {
  padding: 20px;
  .folder-list {
    display: flex;
    flex-wrap: wrap;
    .folder,
    .folder-selected {
      text-align: center;
      padding: 17px;
      margin: 4px;
      p {
        margin: 0;
      }
      .f-title {
        font-size: 14px;
        font-weight: bold;
        margin: 10px 0;
      }
      .f-num {
        font-size: 12px;
        color: rgb(158, 158, 158);
      }
    }
    .folder:hover,
    .folder-selected {
      border: 2px solid rgb(253, 150, 53);
      margin: 2px;
    }
  }
  /* 文件夹列表 */
  .file-list,
  .file-list-mark {
    height: 140px;
    .file-list-img {
      width: 80px;
      height: 80px;
      margin-top: 20px;
    }
  }

  .file-list-mark {
    background: #e2e2e2;
  }

  .tip {
    .title {
      margin-top: 10px;
    }
  }

  ::v-deep .el-upload-list--picture .el-upload-list__item {
    //样式穿透
    padding: 0;
    width: 110px;
    height: 140px;
    text-align: center;
    margin: 0px 5px;
    margin-top: 10px;
  }
  ::v-deep .el-upload-list {
    display: flex;
    flex-flow: wrap;
    min-height: 150px;
  }

  ::v-deep .el-descriptions .is-bordered th {
    //样式穿透
    border: none;
  }
  ::v-deep .el-descriptions .is-bordered td {
    //样式穿透
    border: none;
  }
  ::v-deep .el-descriptions-item__label.is-bordered-label {
    //样式穿透
    font-weight: bold;
    color: #a1a5ad;
    background: #fff;
  }
}
</style>